import React, { useState } from 'react';
import { Input, Select, Button, Cascader, Drawer } from 'antd';
import ServeInfoFrom from '../../../components/serve/serveInfoFrom';
import ServeInfoTable from '../../../components/serve/serveInfoTable';
const { Option } = Select;

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];
export default function index() {
  const [visible, setVisible] = useState(false);

  const showDrawer = () => {
    setVisible(true);
  };
  const onClose = () => {
    setVisible(false);
  };
  function onChange(value) {
    console.log(value);
  }
  return (
    <div>
      <Input
        addonBefore="名称"
        placeholder="请输入名称"
        style={{ width: '300px', marginLeft: '100px' }}
      />
      <Button style={{ float: 'right', marginLeft: '20px' }}>重置</Button>
      <Button style={{ float: 'right' }}>查询</Button>
      <p>
        <Button
          style={{ float: 'left', marginTop: '20px' }}
          onClick={showDrawer}
        >
          新增
        </Button>
        <Button
          style={{ float: 'left', marginLeft: '10px', marginTop: '20px' }}
        >
          删除
        </Button>
      </p>
      <ServeInfoTable></ServeInfoTable>
      <Drawer
        title="新增服务"
        placement="right"
        onClose={onClose}
        visible={visible}
      >
        <ServeInfoFrom></ServeInfoFrom>
      </Drawer>
    </div>
  );
}
